<template>
    <div>
      <header>
        答题记录
      </header>
      <main>
         <div class="container" v-for="(item, index) in questionnaireArr" :key="index">
          <router-link :to="item.message=='去答题'?'/questionnaire/answer':''">
              <div class="base-message">
              <div class="serial-number">
                编号：{{item.s_number}}
              </div>
              <div class="time" v-if="item.time">
                 完成时间：{{item.time}}
              </div>

           </div>
            <div class="inform" :style="{color:item.color}">
              <span>{{item.message}}</span>
               <i class="iconfont" :class="item.icon"></i>
            </div>
          </router-link>
         </div>
      </main>
    </div>
</template>
<script>
import base from '../assets/js/base.js'
export default {
  name: "Questionnaire",
  data() {
    return {
      questionnaireArr: [
        {
          s_number: "132032562452",
          time: "2018-07-15 10:00",
          message: "已完成",
          icon: "icon-right",
          color: "#2484fb"
        },
        {
          s_number: "132032562452",
          time: "2018-07-15 10:00",
          message: "已完成",
          icon: "icon-right",
          color: "#2484fb"
        },
        {
          s_number: "132032562452",
          time: "",
          message: "未完成",
          icon: "icon-warn",
          color: "#FF0000"
        },
        {
          s_number: "132032562452",
          time: "",
          message: "去答题",
          icon: "icon-rightcircleo",
          color: "green"
        }
      ]
    };
  },
  methods: {

  },
  created() {

  },
  mounted() {
    base.changeTabbar('#questionnaire')
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/base.scss";
header {
  position: fixed;
  top: 0;
  height: ptr(60px);
  width: 100%;
  padding-left: ptr(20px);
  line-height: ptr(60px);
  font-size: ptr(18px);
  font-weight: 600;
  color: #2484fb;
  background-color: #fff;
}
main {
  padding-top: ptr(60px);
  margin-bottom: ptr(65px);
  .container {
    a {
      display: block;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: ptr(44px);
      margin: ptr(5px) 0;
      font-size: ptr(14px);
      padding: ptr(10px) ptr(20px);
      background-color: #fff;
      .base-message {
        width: 70%;
        .serial-number {
          color: #0cb0b5;
        }
        .time {
          margin-top: ptr(5px);
          color: #666;
          font-size: ptr(12px);
        }
      }
      .inform {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 30%;
        // color: #2484fb;
        span {
          font-size: ptr(14px);
        }
      }
    }
  }
}
/***适配iPhone X***/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  main {
    margin-bottom: ptr(99px);
  }
}
</style>

